import QtQuick 2.7
import QtQuick.Controls 2.0
import QtQuick.Layouts 1.3

RowLayout {
    id: root
    spacing: 32

    property bool isPlaying: false

    signal playPrev;
    signal play;
    signal pause;
    signal playNext;
    signal playlist;

    Button {
        Layout.alignment: Qt.AlignVCenter
        flat: true
        contentItem: Image {
            source: "qrc:/images/reverse.png"
        }
        onClicked: root.playPrev();
    }

    Button {
        Layout.alignment: Qt.AlignVCenter
        flat: true
        contentItem: Row {
            Image {
                id: img_play
                source: "qrc:/images/play.png"
                visible: opacity == 1
                opacity: 1
            }
            Image {
                id: img_pause
                source: "qrc:/images/pause.png"
                opacity: 0
                visible: opacity == 1
                rotation: 180
            }
        }
        onClicked: {
            if(root.isPlaying)
                root.pause();
            else
                root.play();
        }

        states: [
            State {
                when: root.isPlaying
                name: "playing"
                PropertyChanges {
                    target: img_play
                    rotation: 180
                }
                PropertyChanges {
                    target: img_pause
                    rotation: 360
                }
            }
        ]
        transitions: [
            Transition {
                from: "*"
                to: "playing"
                SequentialAnimation {
                    RotationAnimation {
                        target: img_play
                        duration: 150
                        easing.type: "OutQuart"
                    }
                    PropertyAction { target: img_play; property: "opacity"; value: 0 }
                    PropertyAction { target: img_pause; property: "opacity"; value: 1 }
                    RotationAnimation {
                        target: img_pause
                        duration: 150
                        easing.type: "OutQuart"
                    }
                }
            },
            Transition {
                from: "playing"
                to: "*"
                SequentialAnimation {
                    RotationAnimation {
                        target: img_pause
                        duration: 150
                        easing.type: "OutQuart"
                    }
                    PropertyAction { target: img_pause; property: "opacity"; value: 0 }
                    PropertyAction { target: img_play; property: "opacity"; value: 1 }
                    RotationAnimation {
                        target: img_play
                        duration: 150
                        easing.type: "OutQuart"
                    }
                }
            }
        ]
    }

    Button {
        Layout.alignment: Qt.AlignVCenter
        flat: true
        contentItem: Image {
            source: "qrc:/images/next.png"
        }
        onClicked: root.playNext();
    }

    Button {
        Layout.alignment: Qt.AlignVCenter
        flat: true
        contentItem: Image {
            source: "qrc:/images/playlist.png"
        }
        onClicked: root.playlist();
    }
}
